<template>
  <div class="manage">
    <!-- <div v-if="editMode == 0">
      <el-dialog
        title="新增订单"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose"
      >
        <el-form ref="form" :rules="rules" :model="form" label-width="100px">
          <el-form-item label="同步更新仓库" prop="updWarehouse">
            <div>
              <el-switch v-model="updWarehouse"></el-switch>
            </div>
          </el-form-item>
          <el-form-item label="药品名称" prop="did">
            <el-select
              @change="drugSelectChanged(form.did)"
              v-model="form.did"
              placeholder="请选择药品"
            >
              <div v-for="drug in drugs" :key="drug.did">
                <el-option
                  v-if="form.did == drug.did"
                  :label="drug.drugName"
                  :value="drug.did"
                  selected
                ></el-option>
                <el-option
                  v-else="form.did == drug.did"
                  :label="drug.drugName"
                  :value="drug.did"
                ></el-option>
              </div>
            </el-select>
            <el-form :model="searchForm" class="searchForm">
              <el-form-item class="search">
                <el-input
                  placeholder="药品名过滤"
                  v-model="searchForm.drugName"
                ></el-input>
                <el-button type="primary" @click="searchNameByDrugName"
                  >查询</el-button
                >
              </el-form-item>
            </el-form>
          </el-form-item>
          <div style="display: flex">
            <el-form-item label="厂商名">
              <el-input
                placeholder="厂商名"
                v-model="selectSupplierName"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="售价">
              <el-input
                placeholder="售价"
                v-model="form.drugPrice"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item label="库存">
              <el-input
                placeholder="库存"
                v-model="form.stoke"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-input
                placeholder="状态"
                v-model="form.isSale"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </div>
          <el-form-item label="总价">
            <el-input
              placeholder="总价"
              v-model="form.totalPrice"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="购买量" prop="prchsNum">
            <el-input
              placeholder="请输入购买量"
              v-model="form.prchsNum"
              @change="updTotalPrice()"
            ></el-input>
          </el-form-item>

          <el-form-item label="用户" prop="prchsUser">
            <el-input
              placeholder="请输入购买用户"
              v-model="form.prchsUser"
            ></el-input>
          </el-form-item>

          <el-form-item label="地址" prop="address">
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入地址"
              v-model="form.address"
            ></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div v-else-if="editMode == 1">
      <el-dialog
        title="修改订单"
        :visible.sync="dialogVisible"
        width="35%"
        :before-close="handleClose"
      >
        <el-form ref="form" :rules="rules" :model="form" label-width="100px">
          <el-form-item label="同步更新仓库" prop="updWarehouse">
            <div>
              <el-switch v-model="updWarehouse"></el-switch>
            </div>
          </el-form-item>
          <div class="idInfo">
            <el-form-item label="订单ID">
              <el-input
                placeholder="订单ID"
                v-model="form.oid"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="仓库记录ID">
              <el-input
                placeholder="仓库记录ID"
                v-model="form.wid"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </div>
          <el-form-item label="药品名">
            <el-input
              placeholder="药品名"
              v-model="form.drugName"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="总价">
            <el-input
              placeholder="总价"
              v-model="form.totalPrice"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="订单状态" prop="status">
            <el-select v-model="form.status" placeholder="请选择状态">
              <div v-for="status in orderStatus" :key="status.sid">
                <el-option
                  v-if="form.status == status.sid"
                  :label="status.content"
                  :value="status.sid"
                  selected
                ></el-option>
                <el-option
                  v-else
                  :label="status.content"
                  :value="status.sid"
                ></el-option>
              </div>
            </el-select>
          </el-form-item>
          <el-form-item label="购买量" prop="prchsNum">
            <el-input
              placeholder="请输入购买量"
              v-model="form.prchsNum"
              @change="updTotalPrice()"
            ></el-input>
          </el-form-item>

          <el-form-item label="用户" prop="prchsUser">
            <el-input
              placeholder="请输入购买用户"
              v-model="form.prchsUser"
            ></el-input>
          </el-form-item>

          <el-form-item label="地址" prop="address">
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入地址"
              v-model="form.address"
            ></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </div> -->

    <div class="manage-header">
      <h1>进货信息</h1>
      <el-form :model="searchForm" class="searchForm">
        <el-form-item label="选择" class="searchFormSelect">
          <el-select
            v-model="searchForm.searchType"
            placeholder="请选择搜索类型"
            style="width: 100%"
          >
            <el-option label="药品名" :value="0" selected></el-option>
            <el-option label="厂商名" :value="1"></el-option>
            <el-option label="进货ID" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="search">
          <el-input
            placeholder="请输入名称"
            v-model="searchForm.name"
          ></el-input>
          <el-button type="primary" @click="searchName">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="common-table">
      <el-table height="90%" :data="tableData" stripe style="width: 100%">
        <el-table-column min-width="30px" prop="prchsNo" label="进货编号">
        </el-table-column>
        <el-table-column min-width="30px" prop="wid" label="仓库记录ID">
        </el-table-column>
        <el-table-column min-width="50px" prop="drugName" label="药品名">
        </el-table-column>
        <el-table-column min-width="50px" prop="splName" label="厂商名">
        </el-table-column>
        <el-table-column min-width="30px" prop="splyNum" label="进货量">
        </el-table-column>
        <el-table-column min-width="30px" prop="remain" label="剩余量">
        </el-table-column>
        <el-table-column min-width="50px" label="生产时间">
          <template slot-scope="scope">
            {{
              scope.row.proTime
                .toLocaleString()
                .replace(/T/g, " ")
                .replace(/\.[\d]{3}Z/, "")
            }}
          </template>
        </el-table-column>
        <el-table-column min-width="50px" label="进货时间">
          <template slot-scope="scope">
            {{
              scope.row.prchsTime
                .toLocaleString()
                .replace(/T/g, " ")
                .replace(/\.[\d]{3}Z/, "")
            }}
          </template>
        </el-table-column>
        <el-table-column min-width="40px" label="是否过期">
          <template slot-scope="scope">
            {{ scope.row.hadExpired == true ? "是" : "否" }}
          </template>
        </el-table-column>
        <!-- 
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDel(scope.row.oid)"
              >删除</el-button
            >
            <el-button
              size="mini"
              type="success"
              @click="handlerUserRet(scope.row)"
              :disabled="scope.row.status != 0"
              >申请退货</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="pageData.total"
        @current-change="handlePage"
        :page-size="onePageSize"
        :current-page.sync="pageData.curPage"
        class="pager"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {
  getOrder,
  editOrder,
  delOrder,
  addOrder,
  retOrder,
} from "@/api/warehouseInfo/order";
import { getSupplier, getDrug } from "@/api/common";
import { getSupplierName, getOneDrugPriceByDrugId } from "@/api/drugInfo/drug";
import {
  getStockAndStatusByDrugId,
  getSaleDrugList,
} from "@/api/warehouseInfo/warehouse";
import { getTypeList } from "@/api/warehouseInfo/drugProblemInfo";

import { getWhPrchsInfoPage } from "@/api/warehouseInfo/whprchsInfo";

export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        prchsNo: "",
        did: "",
        wid: "",
        splyNum: "",
        hadExpired: "",
        remain: "",
      },
      formNull: {
        prchsNo: "",
        did: "",
        wid: "",
        splyNum: "",
        hadExpired: "",
        remain: "",
      },
      rules: {
        did: [
          {
            required: true,
            message: "请选择药品名称",
            trigger: "change",
            type: "number",
          },
        ],
        prchsNum: [
          { required: true, message: "请输入购买量", trigger: "blur" },
        ],
      },
      tableData: [
        {
          prchsNo: "",
          wid: "",
          splyNum: "",
          hadExpired: "",
          proTime: "",
          prchsTime: "",
          splName: "",
          drugName: "",
          remain: "",
        },
      ],
      modelType: 0, //0表示新增 1表示编辑
      editMode: 1, //0表示新增 1表示编辑模式 2表示申请退货（控制Dialog）
      onePageSize: 10,
      pageData: {
        total: 0, //当前总条数
        curPage: 1,
      },
      searchForm: {
        name: "",
        searchType: 0,
      },
      selectSupplierName: "",
      drugs: [{ did: "1", drugName: "无数据" }],
      problemList: [{ typeId: "1", typeName: "null" }],
    };
  },
  methods: {
    //提交用户表单
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.updWarehouse = this.updWarehouse; //是否更新仓库信息
          if (this.modelType == 0) {
            //进货
            addOrder(this.form).then(() => {
              //发送后的操作
              this.getList();
            });
          } else if (this.modelType == 1) {
            editOrder(this.form).then(() => {
              //更新后的操作
              this.getList();
            });
          } else if (this.modelType == 2) {
            retOrder(this.form).then(() => {
              //退货后的操作
              this.getList();
            });
          }
          this.selectSupplierName = "";
          //修改页码为第一页
          this.pageData.curPage = 1;
          //关闭弹窗
          this.dialogVisible = false;
          this.form = JSON.parse(JSON.stringify(this.formNull));
        }
      });
    },
    handleClose() {
      this.form = JSON.parse(JSON.stringify(this.formNull));
      this.selectSupplierName = "";
      this.dialogVisible = false;
      this.$refs.form.clearValidate();
    },
    cancel() {
      this.handleClose();
    },
    handleEdit(row) {
      //深拷贝
      this.form = JSON.parse(JSON.stringify(row));
      this.modelType = 1;
      this.editMode = 1;
      this.dialogVisible = true;
      this.updTotalPrice();
    },
    handleDel(oid) {
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delOrder(oid).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getList();
            //修改页码为第一页
            this.pageData.curPage = 1;
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getList(searchType, curPage, limit, sname = null) {
      if (curPage === null || limit == null) {
        curPage = 1;
        limit = this.onePageSize;
      }
      getWhPrchsInfoPage({
        type: searchType,
        curPage: curPage,
        limit: limit,
        sname: sname,
      }).then(({ data }) => {
        //获取数据
        const page = data.data;
        this.tableData = page.records;
        this.pageData.total = page.total;
      });
      //更新选择框数据
      getSupplier().then(({ data }) => {
        this.suppliers = data.data;
      });
      getSaleDrugList().then(({ data }) => {
        this.drugs = data.data;
      });
    },
    getProblemList() {
      getTypeList().then(({ data }) => {
        this.problemList = data.data;
      });
    },
    searchName() {
      this.getList(
        this.searchForm.searchType,
        null,
        null,
        this.searchForm.name
      );
    },
    searchNameByDrugName() {
      getDrug(this.searchForm.drugName).then(({ data }) => {
        this.drugs = data.data;
      });
    },
    handlerAdd() {
      this.editMode = 0;
      this.modelType = 0;
      this.dialogVisible = true;
    },
    handlerUserRet(row) {
      //更新问题列表
      this.getProblemList();
      //深拷贝
      this.form = JSON.parse(JSON.stringify(row));
      this.editMode = 2;
      this.modelType = 2;
      this.dialogVisible = true;
      this.updTotalPrice();
    },
    //选择页面的回调
    handlePage(val) {
      this.getList(this.searchForm.searchType, val, this.onePageSize);
    },
    updTotalPrice() {
      this.$set(
        this.form,
        "totalPrice",
        (this.form.drugPrice * this.form.prchsNum).toFixed(2)
      );
    },
    drugSelectChanged(did) {
      getSupplierName({ did: did }).then(({ data }) => {
        this.selectSupplierName = data.data;
      });
      getOneDrugPriceByDrugId({ did: did }).then(({ data }) => {
        this.form.drugPrice = data.data;
        this.updTotalPrice();
      });
      getStockAndStatusByDrugId({ did: did }).then(({ data }) => {
        this.form.stoke = data.data.stoke;
        this.form.isSale = data.data.isSale;
      });
    },
  },
  filters: {
    rounding(value) {
      return value.toFixed(2);
    },
  },

  mounted() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.manage {
  height: 100%;
  .manage-header {
    display: flex;
    justify-content: space-between;
    .addBtn {
      height: 70%;
    }
    .searchFormSelect {
      width: 200px;
    }
  }
  .idInfo {
    display: flex;
  }
  .retPchInfo {
    display: flex;
  }

  .common-table {
    position: relative;
    height: calc(85%);
    overflow-y: scroll; /*y轴溢出显示滚动条*/
    &::-webkit-scrollbar {
      /* 取消滚动条宽度 */
      width: 0;
    }
    .pager {
      position: absolute;
      bottom: 0;
      right: 20px;
    }
  }
  .searchForm {
    display: flex;
  }
  .editDialog {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    flex-direction: column;
  }
  /deep/.el-input.is-disabled .el-input__inner {
    background-color: #f5f5f5;
    border-color: #e4e7ed;
    color: #363636;
    cursor: not-allowed;
  }
}
</style>
